import React, {
  useState,
  useRef,
  useEffect,
  useCallback,
  forwardRef,
  useImperativeHandle,
} from 'react';
import styles from './index.less';

// 定义可拖拽元素的类型
export interface DraggableItem {
  id: string;
  type: string; // 'rect', 'circle', 'text', 'image'
  x: number;
  y: number;
  width: number;
  height: number;
  color: string;
  text?: string;
  imageUrl?: string;
  rotation?: number;
  opacity?: number;
  lockRatio?: boolean;
}

// 定义元素库中的元素类型
interface ElementLibraryItem {
  id: string;
  type: string;
  name: string;
  color: string;
}

interface CanvasContainerProps {
  onElementSelect?: (element: DraggableItem | null) => void;
  onElementUpdate?: (element: DraggableItem) => void;
}

// 定义组件引用类型
export interface CanvasContainerRef {
  updateElementProperties: (properties: Partial<DraggableItem>) => void;
  saveCanvas: () => void;
  previewCanvas: () => void;
}

// 定义组件实现函数
function CanvasContainerImpl(
  props: CanvasContainerProps,
  ref: React.Ref<CanvasContainerRef>,
) {
  const { onElementSelect, onElementUpdate } = props;
  // Canvas引用
  const canvasRef = useRef<HTMLCanvasElement>(null);
  // 当前鼠标光标样式
  const [cursorStyle, setCursorStyle] = useState<
    'default' | 'grab' | 'nwse-resize' | 'nesw-resize'
  >('default');
  // 存储canvas上的元素
  const [canvasElements, setCanvasElements] = useState<DraggableItem[]>([]);
  // 当前选中的元素ID
  const [selectedElementId, setSelectedElementId] = useState<string | null>(
    null,
  );
  // 拖拽状态
  const [isDragging, setIsDragging] = useState(false);
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
  // 当前正在拖动的元素ID
  const [draggingElementId, setDraggingElementId] = useState<string | null>(
    null,
  );
  // 元素初始位置（拖动开始时）
  const [elementStartPos, setElementStartPos] = useState({ x: 0, y: 0 });
  // 调整大小状态
  const [resizingElementId, setResizingElementId] = useState<string | null>(
    null,
  );
  const [resizeDirection, setResizeDirection] = useState<string | null>(null);
  const [elementStartSize, setElementStartSize] = useState({
    width: 0,
    height: 0,
  });
  // 图片缓存，避免重复加载
  const imageCache = useRef<Map<string, HTMLImageElement>>(new Map());

  // 预览浮窗状态
  const [isPreviewVisible, setIsPreviewVisible] = useState(false);
  const [previewImageUrl, setPreviewImageUrl] = useState('');

  // 元素库数据
  const elementLibrary: ElementLibraryItem[] = [
    { id: 'lib-rect-1', type: 'rect', name: '矩形', color: '#1890ff' },
    { id: 'lib-rect-2', type: 'rect', name: '红色矩形', color: '#ff4d4f' },
    { id: 'lib-circle-1', type: 'circle', name: '圆形', color: '#52c41a' },
    { id: 'lib-text-1', type: 'text', name: '文本', color: '#faad14' },
  ];

  // 节流函数 - 限制函数执行频率
  const throttle = (func: Function, limit: number) => {
    let inThrottle: boolean;
    return function (this: any, ...args: any[]) {
      if (!inThrottle) {
        func.apply(this, args);
        inThrottle = true;
        setTimeout(() => (inThrottle = false), limit);
      }
    };
  };

  // 使用useRef缓存canvas上下文，避免每次重绘都重新获取
  const ctxRef = useRef<CanvasRenderingContext2D | null>(null);

  // 初始化和重绘canvas
  const redrawCanvas = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // 只在第一次获取或上下文丢失时重新获取
    if (!ctxRef.current) {
      ctxRef.current = canvas.getContext('2d');
    }

    const ctx = ctxRef.current;
    if (!ctx) return;

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制所有元素
    canvasElements.forEach((element) => {
      // 绘制元素（包括不透明度和旋转）
      // 保存当前状态
      ctx.save();

      // 设置透明度
      ctx.globalAlpha = element.opacity !== undefined ? element.opacity : 1;

      // 应用旋转
      if (element.rotation !== undefined) {
        const centerX = element.x + element.width / 2;
        const centerY = element.y + element.height / 2;
        ctx.translate(centerX, centerY);
        ctx.rotate((element.rotation * Math.PI) / 180); // 转换为弧度
        ctx.translate(-centerX, -centerY);
      }

      // 设置样式
      ctx.fillStyle = element.color;
      ctx.strokeStyle = 'transparent';
      ctx.lineWidth = 2;

      // 根据元素类型绘制
      switch (element.type) {
        case 'rect':
          ctx.fillRect(element.x, element.y, element.width, element.height);
          break;

        case 'circle':
          ctx.beginPath();
          ctx.arc(
            element.x + element.width / 2,
            element.y + element.height / 2,
            element.width / 2,
            0,
            2 * Math.PI,
          );
          ctx.fill();
          break;

        case 'text':
          ctx.font = '16px Arial';
          ctx.textAlign = 'center';
          ctx.fillText(
            element.text || '文本',
            element.x + element.width / 2,
            element.y + element.height / 2,
          );
          break;

        case 'image':
          // 图片加载和绘制逻辑
          if (element.imageUrl) {
            // 检查缓存中是否有该图片
            if (imageCache.current.has(element.imageUrl)) {
              const cachedImg = imageCache.current.get(element.imageUrl);
              // 确保图片已加载完成再绘制
              if (
                cachedImg &&
                cachedImg.complete &&
                cachedImg.naturalHeight > 0
              ) {
                ctx.drawImage(
                  cachedImg,
                  element.x,
                  element.y,
                  element.width,
                  element.height,
                );
              }
            } else {
              // 创建新图片对象
              const img = new Image();
              // 设置跨域属性
              img.crossOrigin = 'anonymous';
              // 先添加到缓存，标记为加载中
              imageCache.current.set(element.imageUrl, img);

              // 图片加载完成回调
              img.onload = () => {
                // 只在组件挂载状态下触发重绘
                if (canvasRef.current) {
                  redrawCanvas();
                }
              };

              // 图片加载错误处理
              img.onerror = () => {
                console.error('Failed to load image:', element.imageUrl);
                // 从缓存中移除加载失败的图片
                imageCache.current.delete(element.imageUrl);
              };

              // 设置图片源
              img.src = element.imageUrl;
            }
          }
          break;
      }

      // 恢复之前的状态
      ctx.restore();

      // 如果元素被选中，绘制虚线框和四个角的调整大小控制点（不应用元素的透明度和旋转）
      if (selectedElementId === element.id) {
        // 保存当前状态，避免样式影响其他绘制
        ctx.save();

        // 绘制虚线框
        ctx.setLineDash([5, 5]); // 设置虚线样式
        ctx.strokeStyle = '#4096ff';
        ctx.lineWidth = 2;
        ctx.globalAlpha = 1; // 强制设置为完全不透明
        ctx.strokeRect(
          element.x - 2,
          element.y - 2,
          element.width + 4,
          element.height + 4,
        );

        // 定义四个角的控制点
        const resizeHandles = [
          { x: element.x - 6, y: element.y - 6 }, // 左上角
          { x: element.x + element.width - 6, y: element.y - 6 }, // 右上角
          { x: element.x - 6, y: element.y + element.height - 6 }, // 左下角
          {
            x: element.x + element.width - 6,
            y: element.y + element.height - 6,
          }, // 右下角
        ];

        // 绘制四个角的控制点
        ctx.fillStyle = '#4096ff';
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 1;

        resizeHandles.forEach((handle) => {
          ctx.fillRect(handle.x, handle.y, 12, 12);
          ctx.strokeRect(handle.x, handle.y, 12, 12);
        });

        // 恢复状态，确保不影响后续绘制
        ctx.restore();
      }
    });
  }, [canvasElements, selectedElementId]);

  // 处理拖拽开始
  const handleDragStart = (e: React.DragEvent, item: ElementLibraryItem) => {
    // 设置拖拽数据
    e.dataTransfer.setData('application/json', JSON.stringify(item));
    setIsDragging(true);
  };

  // 处理拖拽结束
  const handleDragEnd = () => {
    setIsDragging(false);
  };

  // 处理拖拽进入canvas
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault(); // 允许放置
  };

  // 处理拖拽离开canvas
  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
  };

  // 处理在canvas上放置元素
  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();

    const canvas = canvasRef.current;
    if (!canvas) return;

    // 获取canvas位置
    const rect = canvas.getBoundingClientRect();
    // 计算相对于canvas的坐标
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 获取拖拽的数据
    const data = e.dataTransfer.getData('application/json');
    try {
      const droppedItem: any = JSON.parse(data);

      // 创建新元素
      const newElement: DraggableItem = {
        id: `canvas-${droppedItem.type}-${Date.now()}`,
        type: droppedItem.type,
        x: x - 50, // 居中放置
        y: y - 50,
        width: 100,
        height: 100,
        color: droppedItem.color,
        text: droppedItem.type === 'text' ? '点击编辑' : undefined,
        imageUrl: droppedItem.imageUrl || undefined,
        rotation: 0,
        opacity: 1,
        lockRatio: false,
      };

      // 添加到canvas元素列表
      setCanvasElements([...canvasElements, newElement]);
      setSelectedElementId(newElement.id);
      // 通知父组件元素被选中
      if (onElementSelect) {
        onElementSelect(newElement);
      }
    } catch (error) {
      console.error('Failed to parse dropped data:', error);
    }

    setIsDragging(false);
  };

  // 检查点是否在调整大小的控制点上
  const isPointOnResizeHandle = (
    x: number,
    y: number,
    element: DraggableItem,
  ): string | null => {
    // 定义四个角的调整点区域（12x12像素）
    const resizeHandles = [
      {
        area: { x: element.x - 12, y: element.y - 12, width: 24, height: 24 },
        direction: 'nw',
      }, // 左上角
      {
        area: {
          x: element.x + element.width - 12,
          y: element.y - 12,
          width: 24,
          height: 24,
        },
        direction: 'ne',
      }, // 右上角
      {
        area: {
          x: element.x - 12,
          y: element.y + element.height - 12,
          width: 24,
          height: 24,
        },
        direction: 'sw',
      }, // 左下角
      {
        area: {
          x: element.x + element.width - 12,
          y: element.y + element.height - 12,
          width: 24,
          height: 24,
        },
        direction: 'se',
      }, // 右下角
    ];

    // 检查是否点击在任何一个调整点上
    for (const handle of resizeHandles) {
      if (
        x >= handle.area.x &&
        x <= handle.area.x + handle.area.width &&
        y >= handle.area.y &&
        y <= handle.area.y + handle.area.height
      ) {
        return handle.direction;
      }
    }

    return null;
  };

  // 处理鼠标按下事件（开始拖动元素或调整大小）
  const handleMouseDown = (e: React.MouseEvent) => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 从后往前遍历，优先选择顶层元素
    for (let i = canvasElements.length - 1; i >= 0; i--) {
      const element = canvasElements[i];

      // 检查是否点击在调整大小的控制点上
      const resizeDir = isPointOnResizeHandle(x, y, element);
      if (resizeDir && selectedElementId === element.id) {
        setResizingElementId(element.id);
        setResizeDirection(resizeDir);
        setDragStart({ x: e.clientX, y: e.clientY });
        setElementStartPos({ x: element.x, y: element.y });
        setElementStartSize({ width: element.width, height: element.height });
        return;
      }

      // 简单的碰撞检测
      if (
        x >= element.x &&
        x <= element.x + element.width &&
        y >= element.y &&
        y <= element.y + element.height
      ) {
        setSelectedElementId(element.id);
        setDraggingElementId(element.id);
        setDragStart({ x: e.clientX, y: e.clientY });
        setElementStartPos({ x: element.x, y: element.y });
        // 将被拖动的元素移到数组末尾（顶层显示）
        const newElements = [...canvasElements];
        const [movedElement] = newElements.splice(i, 1);
        newElements.push(movedElement);
        setCanvasElements(newElements);
        // 通知父组件元素被选中
        if (onElementSelect) {
          onElementSelect(movedElement);
        }
        return;
      }
    }

    // 没有点击到任何元素，取消选择
    setSelectedElementId(null);
    setDraggingElementId(null);
    setResizingElementId(null);
    // 通知父组件取消选择
    if (onElementSelect) {
      onElementSelect(null);
    }
  };

  // 处理鼠标抬起事件（结束拖动或调整大小）
  const handleMouseUp = () => {
    setDraggingElementId(null);
    setResizingElementId(null);
    setResizeDirection(null);
  };

  // 当canvas元素变化时重绘
  useEffect(() => {
    redrawCanvas();
  }, [canvasElements, selectedElementId]);

  // 更新元素属性方法（供父组件调用）
  useEffect(() => {
    // 这个effect主要用于确保props回调可用
    if (onElementSelect && onElementUpdate) {
      console.log('CanvasContainer initialized with callbacks');
    }
  }, [onElementSelect, onElementUpdate]);

  // 使用useRef存储当前正在拖动的元素的临时位置
  const dragTempPosRef = useRef({ x: 0, y: 0 });
  const animationFrameRef = useRef<number>();

  // 处理鼠标移动事件，检测是否在控制点上并更新光标样式
  const handleMouseMove = (e: React.MouseEvent) => {
    const canvas = canvasRef.current;
    if (!canvas || !selectedElementId) {
      setCursorStyle('default');
      return;
    }

    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 查找选中的元素
    const selectedElement = canvasElements.find(
      (el) => el.id === selectedElementId,
    );
    if (!selectedElement) {
      setCursorStyle('default');
      return;
    }

    // 检查是否在调整大小的控制点上
    const resizeDir = isPointOnResizeHandle(x, y, selectedElement);
    if (resizeDir) {
      // 设置相应的光标样式
      if (resizeDir === 'nw' || resizeDir === 'se') {
        setCursorStyle('nwse-resize');
      } else if (resizeDir === 'ne' || resizeDir === 'sw') {
        setCursorStyle('nesw-resize');
      }
    } else if (
      x >= selectedElement.x &&
      x <= selectedElement.x + selectedElement.width &&
      y >= selectedElement.y &&
      y <= selectedElement.y + selectedElement.height
    ) {
      // 如果在元素上但不在控制点上，设置为抓取样式
      setCursorStyle('grab');
    } else {
      // 不在元素上，设置为默认样式
      setCursorStyle('default');
    }
  };

  // 优化的元素位置或大小更新函数
  const updateElement = useCallback(
    throttle((e: MouseEvent) => {
      if (!draggingElementId && !resizingElementId) return;

      // 计算鼠标移动的距离
      const deltaX = e.clientX - dragStart.x;
      const deltaY = e.clientY - dragStart.y;

      // 先更新临时位置，不立即触发React状态更新
      dragTempPosRef.current = { x: deltaX, y: deltaY };

      // 取消之前的动画帧
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }

      // 使用requestAnimationFrame来优化渲染性能
      animationFrameRef.current = requestAnimationFrame(() => {
        if (draggingElementId) {
          // 更新元素位置
          setCanvasElements((prevElements) =>
            prevElements.map((element) => {
              if (element.id === draggingElementId) {
                const updatedElement = {
                  ...element,
                  x: elementStartPos.x + dragTempPosRef.current.x,
                  y: elementStartPos.y + dragTempPosRef.current.y,
                };
                // 通知父组件元素更新
                if (onElementUpdate) {
                  onElementUpdate(updatedElement);
                }
                return updatedElement;
              }
              return element;
            }),
          );
        } else if (resizingElementId && resizeDirection) {
          // 更新元素大小，根据不同的拖拽方向处理
          setCanvasElements((prevElements) =>
            prevElements.map((element) => {
              if (element.id === resizingElementId) {
                // 计算新的尺寸和位置，根据拖拽方向
                let newX = elementStartPos.x;
                let newY = elementStartPos.y;
                let newWidth = elementStartSize.width;
                let newHeight = elementStartSize.height;

                switch (resizeDirection) {
                  case 'se': // 右下角拖拽
                    newWidth =
                      elementStartSize.width + dragTempPosRef.current.x;
                    newHeight =
                      elementStartSize.height + dragTempPosRef.current.y;
                    break;
                  case 'ne': // 右上角拖拽
                    newY = elementStartPos.y + dragTempPosRef.current.y;
                    newWidth =
                      elementStartSize.width + dragTempPosRef.current.x;
                    newHeight =
                      elementStartSize.height - dragTempPosRef.current.y;
                    break;
                  case 'sw': // 左下角拖拽
                    newX = elementStartPos.x + dragTempPosRef.current.x;
                    newWidth =
                      elementStartSize.width - dragTempPosRef.current.x;
                    newHeight =
                      elementStartSize.height + dragTempPosRef.current.y;
                    break;
                  case 'nw': // 左上角拖拽
                    newX = elementStartPos.x + dragTempPosRef.current.x;
                    newY = elementStartPos.y + dragTempPosRef.current.y;
                    newWidth =
                      elementStartSize.width - dragTempPosRef.current.x;
                    newHeight =
                      elementStartSize.height - dragTempPosRef.current.y;
                    break;
                }

                // 限制最小尺寸
                newWidth = Math.max(20, newWidth);
                newHeight = Math.max(20, newHeight);

                const updatedElement = {
                  ...element,
                  x: newX,
                  y: newY,
                  width: newWidth,
                  height: newHeight,
                };

                // 如果锁定比例，同步宽高变化
                if (element.lockRatio) {
                  const aspectRatio = element.width / element.height;
                  // 重新计算保持比例的尺寸
                  if (
                    newWidth !== elementStartSize.width &&
                    newHeight !== elementStartSize.height
                  ) {
                    // 如果同时改变了宽高，使用先变化的那个维度作为基准
                    if (
                      Math.abs(newWidth - elementStartSize.width) >
                      Math.abs(newHeight - elementStartSize.height)
                    ) {
                      updatedElement.height = Math.round(
                        newWidth / aspectRatio,
                      );
                    } else {
                      updatedElement.width = Math.round(
                        newHeight * aspectRatio,
                      );
                    }
                  } else if (newWidth !== elementStartSize.width) {
                    updatedElement.height = Math.round(newWidth / aspectRatio);
                  } else if (newHeight !== elementStartSize.height) {
                    updatedElement.width = Math.round(newHeight * aspectRatio);
                  }
                }
                // 通知父组件元素更新
                if (onElementUpdate) {
                  onElementUpdate(updatedElement);
                }
                return updatedElement;
              }
              return element;
            }),
          );
        }
      });
    }, 16),
    [
      draggingElementId,
      resizingElementId,
      resizeDirection,
      dragStart,
      elementStartPos,
      elementStartSize,
      onElementUpdate,
    ],
  );

  // 添加全局鼠标事件监听器
  useEffect(() => {
    // 在拖拽元素或调整大小时添加全局监听器
    if (draggingElementId || resizingElementId) {
      const handleGlobalMouseMove = (e: MouseEvent) => {
        updateElement(e);
      };

      const handleGlobalMouseUp = () => {
        // 清理动画帧
        if (animationFrameRef.current) {
          cancelAnimationFrame(animationFrameRef.current);
          animationFrameRef.current = undefined;
        }
        setDraggingElementId(null);
        setResizingElementId(null);
        setResizeDirection(null);
      };

      document.addEventListener('mousemove', handleGlobalMouseMove);
      document.addEventListener('mouseup', handleGlobalMouseUp);

      // 清理函数
      return () => {
        if (animationFrameRef.current) {
          cancelAnimationFrame(animationFrameRef.current);
        }
        document.removeEventListener('mousemove', handleGlobalMouseMove);
        document.removeEventListener('mouseup', handleGlobalMouseUp);
      };
    }
  }, [draggingElementId, resizingElementId, updateElement]);

  // 更新元素属性
  const updateElementProperties = useCallback(
    (properties: Partial<DraggableItem>) => {
      const { id } = properties;
      if (!id) return;

      setCanvasElements((prevElements) => {
        const updatedElements = prevElements.map((element) => {
          if (element.id === id) {
            const updatedElement = { ...element, ...properties };
            // 如果锁定比例，同步宽高变化
            if (updatedElement.lockRatio) {
              // 保存宽高比（使用更新前的宽高比以保持一致性）
              const aspectRatio = element.width / element.height;
              // 确保aspectRatio有效
              if (isFinite(aspectRatio) && aspectRatio > 0) {
                // 如果只更新了宽度，计算相应的高度
                if (
                  properties.width !== undefined &&
                  properties.height === undefined
                ) {
                  updatedElement.height = Math.round(
                    properties.width / aspectRatio,
                  );
                }
                // 如果只更新了高度，计算相应的宽度
                if (
                  properties.height !== undefined &&
                  properties.width === undefined
                ) {
                  updatedElement.width = Math.round(
                    properties.height * aspectRatio,
                  );
                }
              }
            }
            // 通知父组件元素更新
            if (onElementUpdate) {
              onElementUpdate(updatedElement);
            }
            return updatedElement;
          }
          return element;
        });
        return updatedElements;
      });
    },
    [onElementUpdate],
  );

  // 实现保存Canvas为图片的方法
  const saveCanvas = () => {
    // 检查是否有图片正在加载中
    const hasLoadingImages = canvasElements.some(
      (el) =>
        el.type === 'image' &&
        el.imageUrl &&
        (!imageCache.current.has(el.imageUrl) ||
          !imageCache.current.get(el.imageUrl)?.complete),
    );

    if (hasLoadingImages) {
      alert('部分图片仍在加载中，请稍候再保存');
      return;
    }

    try {
      const canvas = canvasRef.current;
      if (!canvas) {
        throw new Error('Canvas元素未找到');
      }

      // 确保canvas内容已渲染完成
      redrawCanvas();

      // 将canvas内容转换为图片
      const imageUrl = canvas.toDataURL('image/png');

      // 创建下载链接
      const link = document.createElement('a');
      link.download = 'canvas-save.png';
      link.href = imageUrl;

      // 触发下载
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } catch (error) {
      console.error('保存Canvas为图片时出错:', error);
      alert('保存失败，请重试');
    }
  };

  // 实现预览Canvas为图片的方法
  const previewCanvas = () => {
    // 检查是否有图片正在加载中
    const hasLoadingImages = canvasElements.some(
      (el) =>
        el.type === 'image' &&
        el.imageUrl &&
        (!imageCache.current.has(el.imageUrl) ||
          !imageCache.current.get(el.imageUrl)?.complete),
    );

    if (hasLoadingImages) {
      alert('部分图片仍在加载中，请稍候再预览');
      return;
    }

    try {
      const canvas = canvasRef.current;
      if (!canvas) {
        throw new Error('Canvas元素未找到');
      }

      // 确保canvas内容已渲染完成
      redrawCanvas();

      // 将canvas内容转换为图片
      const imageUrl = canvas.toDataURL('image/png');

      // 设置预览图片URL并显示浮窗
      setPreviewImageUrl(imageUrl);
      setIsPreviewVisible(true);

      // 阻止背景滚动
      document.body.style.overflow = 'hidden';
    } catch (error) {
      console.error('预览Canvas为图片时出错:', error);
      alert('预览失败，请重试');
    }
  };

  // 关闭预览浮窗的方法
  const closePreview = () => {
    setIsPreviewVisible(false);
    setPreviewImageUrl('');
    // 恢复背景滚动
    document.body.style.overflow = 'auto';
  };

  // 使用useImperativeHandle暴露方法给父组件
  useImperativeHandle(
    ref,
    () => ({
      updateElementProperties,
      saveCanvas,
      previewCanvas,
    }),
    [updateElementProperties, saveCanvas, previewCanvas],
  );

  // 监听全局保存事件
  useEffect(() => {
    const handleGlobalSave = () => {
      saveCanvas();
    };

    window.addEventListener('globalSaveCanvas', handleGlobalSave);
    return () => {
      window.removeEventListener('globalSaveCanvas', handleGlobalSave);
    };
  }, [saveCanvas]);

  // 监听全局预览事件
  useEffect(() => {
    const handleGlobalPreview = () => {
      previewCanvas();
    };

    window.addEventListener('globalPreviewCanvas', handleGlobalPreview);
    return () => {
      window.removeEventListener('globalPreviewCanvas', handleGlobalPreview);
    };
  }, [previewCanvas]);

  // 初始化canvas尺寸
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // 设置canvas尺寸为容器尺寸
    const resizeCanvas = () => {
      const container = canvas.parentElement;
      if (container) {
        // 强制设置canvas的宽高为容器的实际尺寸
        const containerRect = container.getBoundingClientRect();
        canvas.width = containerRect.width;
        canvas.height = containerRect.height;
        // 同时通过style属性设置，确保视觉上充满容器
        canvas.style.width = '100%';
        canvas.style.height = '100%';
        redrawCanvas();
      }
    };

    // 初始调用一次
    resizeCanvas();
    // 延迟再调用一次，确保DOM完全渲染后再设置尺寸
    setTimeout(resizeCanvas, 100);
    // 延迟更长时间再调用一次，确保所有组件都已完成挂载
    setTimeout(resizeCanvas, 300);
    // 监听窗口大小变化
    window.addEventListener('resize', resizeCanvas);

    return () => {
      window.removeEventListener('resize', resizeCanvas);
    };
  }, []);

  return (
    <div className={styles.canvasContainer}>
      {/* 右侧canvas画板 */}
      <div className={styles.canvasWrapper}>
        <canvas
          ref={canvasRef}
          className={styles.canvas}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          onMouseDown={handleMouseDown}
          onMouseUp={handleMouseUp}
          onMouseLeave={handleMouseUp}
          onMouseMove={handleMouseMove}
          style={{
            cursor: resizingElementId
              ? resizeDirection === 'nw' || resizeDirection === 'se'
                ? 'nwse-resize'
                : resizeDirection === 'ne' || resizeDirection === 'sw'
                ? 'nesw-resize'
                : 'se-resize'
              : draggingElementId
              ? 'grabbing'
              : cursorStyle,
          }}
        />

        {/* 操作提示 */}
        {isDragging && <div className={styles.dragHint}>释放鼠标放置元素</div>}

        {/* 选中元素的信息 */}
        {selectedElementId && (
          <div className={styles.selectedInfo}>
            <p>
              已选中元素:{' '}
              {canvasElements.find((el) => el.id === selectedElementId)?.type}
            </p>
            <button
              className={styles.deleteBtn}
              onClick={() => {
                setCanvasElements(
                  canvasElements.filter((el) => el.id !== selectedElementId),
                );
                setSelectedElementId(null);
              }}
            >
              删除元素
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// 使用forwardRef包装组件
const CanvasContainer = forwardRef(CanvasContainerImpl);

// 为了TypeScript类型检查，需要断言组件类型
export default CanvasContainer as React.RefForwardingComponent<
  CanvasContainerRef,
  CanvasContainerProps
>;
